<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hi 子薇</title>
  <style>
    .table{
      width: 400px;
      height: 400px;
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
    }
    .table div{
      text-align: center; /* 文字水平居中 */
      height: 99px;
      width: 99px;
      line-height: 100px; /* 文字垂直居中: 高度跟height一样的时候, 就垂直居中了(仅限单行) */
      border-left: 1px solid #ddd;
      border-top: 1px solid #ddd;
      float: left;
    }
    .table div:hover {
      background-color: rgb(202, 225, 233);
    }
  </style>
</head>
<body>
  <div class="table">
    <div id="a">1</div>
    <!-- <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div> -->
  </div>
  <script>
    // 1. 选择元素
    var divA = document.getElementById("a")
    // 2. 设置行为
    divA.onclick = function(){
      // 2.1 获取元素内文字
      var text = divA.innerText
      console.log(text)
      // 2.2 把文字变成数字
      text = parseInt(text)
      // 2.3 加1
      text += 1 // text = text + 1
      console.log(text)
      // 2.4 把数字写到div里
      divA.innerText = text
    }
  </script>
</body>
</html>